<template>
  <view class="content">
    <TitlePage title="童装库存网" @getHeadHeight="getHeadHeight"></TitlePage>
    <scroll-view
      class="page-box"
      id="pageBox"
      scroll-y
      :style="'height: calc(100vh - 190rpx - ' + HeadNavHeight + 'px);'"
      @scroll="onScroll"
    >
      <view class="home-swiper">
        <swiper class="swiper" circular :autoplay="true" :interval="2000" :duration="500">
          <swiper-item v-for="(item, index) in swiperList" :key="index">
            <image class="img-box" :src="item.banner_image" alt="" />
          </swiper-item>
        </swiper>
      </view>
      <view class="icon-nav-list">
        <view class="item" @click="goPage('出售库存')">
          <view class="item-img">
            <text class="iconfont tz-chushoukucun"></text>
          </view>
          <view class="item-text">出售库存</view>
        </view>
        <view class="item" @click="goPage('收购库存')">
          <view class="item-img">
            <text class="iconfont tz-shougoukucun"></text>
          </view>
          <view class="item-text">收购库存</view>
        </view>
        <view class="item" @click="goShopList">
          <view class="item-img">
            <text class="iconfont tz-xinxizhiding"></text>
          </view>
          <view class="item-text">行业名录</view>
        </view>
        <view class="item" @click="goRosterPage">
          <view class="item-img">
            <text class="iconfont tz-shixinmingdan"></text>
          </view>
          <view class="item-text">失信名单</view>
        </view>
        <view class="item" @click="goKf">
          <view class="item-img">
            <text class="iconfont tz-pingtaikefu"></text>
          </view>
          <view class="item-text">平台客服</view>
        </view>
      </view>
      <view class="top-shop">
        <view class="shop-title">
          <image class="shop-title-img" src="https://images.tongzhuangkc.com/Frame%20529.png" alt="" />
        </view>
        <view class="shop-cont">
          <view class="shop-item" v-for="item in shopList" :key="item.member_id" @click="goShop(item.member_id)">
            <view class="item-img">
              <image class="icon-img" :src="item.member_head" />
            </view>
            <view class="item-text">{{ item.member_name }}</view>
          </view>
        </view>
      </view>

      <view class="top-good">
        <van-sticky :offset-top="offsetTop" :scroll-top="scrollTop">
          <view class="good-screen" id="goodScreen">
            <text
              class="screen-item"
              :class="tagId === item.value ? 'active' : ''"
              v-for="item in tagList"
              :key="item.value"
              @click="chooseTag(item.value)"
              >{{ item.name }}</text
            >
          </view>
        </van-sticky>
        <Scrollbox @lowerFun="getGoodList" :otherHeight="282" :status="loadingStatus">
          <template #contScrollBox>
            <view class="good-cont" style="display: flex; flex-wrap: wrap">
              <view class="good-item" v-for="item in goodList" :key="item.goods_id">
                <good-list :info="item"></good-list>
              </view>
            </view>
          </template>
        </Scrollbox>
      </view>
    </scroll-view>

    <TabBar :currentPage="0"></TabBar>
  </view>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import GoodList from '@/components/good/index'
import TabBar from '@/components/tabbar/index'
import TitlePage from '@/components/title/index'
import { useUserStore } from '@/store/modules/user'
import { getBanners, getRecommendShopList, getTagGoodsList, alertAjax } from '@/http/home'
import { getCommon } from '@/http/common'
import Scrollbox from '@/components/scrollbox/index'

export default {
  components: {
    GoodList,
    TabBar,
    TitlePage,
    Scrollbox,
  },
  setup() {
    const userStore = useUserStore()
    const state = reactive({
      HeadNavHeight: 0,
      swiperList: [],
      shopList: [],
      tagList: [],
      goodList: [],
      isEnd: false,
      goodPage: 1,
      tagId: '',
      offsetTop: 0,
      scrollTop: 0,
      loadingStatus: 'loading',
    })
    const getHeadHeight = (data) => {
      state.HeadNavHeight = data
    }
    const goPage = (name) => {
      uni.navigateTo({
        url: `/subpackage-goods/goods/index?name=${name}`,
      })
    }
    const goRosterPage = () => {
      uni.navigateTo({
        url: `/subpackage-user/roster/index`,
      })
    }
    // 跳转商铺详情
    const goShop = (id) => {
      uni.navigateTo({
        url: `/subpackage-goods/shop/index?id=${id}`,
      })
    }
    // 跳转商铺列表
    const goShopList = () => {
      uni.switchTab({
        url: `/pages/shops/index`,
      })
    }
    const goKf = () => {
      uni.navigateTo({
        url: `/subpackage-platform/customer/index`,
      })
    }
    // 获取banner
    const getBanner = async () => {
      const { data } = await getBanners()
      state.swiperList = data || []
    }
    // 获取推荐商家
    const getRecommendShop = async () => {
      const { data } = await getRecommendShopList({
        size: 20,
      })
      state.shopList = data
    }
    // 首页弹窗
    const getAlert = async () => {
      const { data } = await alertAjax()
      console.log(data)
    }
    // 获取商品标签
    const getGoodTag = async () => {
      const { data } = await getCommon({
        type: '',
      })
      userStore.setField(data)
      state.tagList = data['tag_id']
      chooseTag(data['tag_id'][0]['value'])
    }
    const chooseTag = (tagId) => {
      state.tagId = tagId
      state.goodPage = 1
      state.isEnd = false
      state.goodList = []
      state.loadingStatus = 'loading'
      getGoodList()
    }
    // 获取商品列表
    const getGoodList = async () => {
      if (state.isEnd) return
      try {
        let data = await getTagGoodsList({
          tag_id: state.tagId,
          page: state.goodPage,
        })
        const { list, total_page } = data.data
        state.goodList = state.goodPage === 1 ? list : state.goodList.concat(list)

        if (list.length === 0 || total_page === state.goodPage) {
          state.isEnd = true
          state.loadingStatus = 'loadmore'
        } else {
          state.goodPage++
          state.loadingStatus = 'loading'
        }
      } catch (e) {
        state.isRefresh = false
        state.loading = false
      }
    }
    // 商品标签筛选置顶操作
    const onScroll = (event) => {
      const query = uni.createSelectorQuery()
      query
        .select('#goodScreen')
        .boundingClientRect(() => {
          state.scrollTop = event.detail.scrollTop
          state.offsetTop = state.HeadNavHeight + 50
        })
        .exec()
    }
    onMounted(() => {
      getBanner()
      getRecommendShop()
      getAlert()
      getGoodTag()
    })
    return {
      ...toRefs(state),
      getHeadHeight,
      goPage,
      goRosterPage,
      onScroll,
      getGoodList,
      goShop,
      goShopList,
      chooseTag,
      goKf,
    }
  },
}
</script>

<style lang="scss">
.content {
  background: linear-gradient(180deg, #d0e8ff 0%, rgba(208, 232, 255, 0) 60%, rgb(255, 255, 255) 100%);
  height: 100vh;
}
.page-box {
  width: 100%;
  overflow: hidden;
  overflow-y: auto !important;
}
.home-swiper {
  padding: 10rpx 24rpx;
  height: 350rpx;
  .swiper {
    width: 100%;
    height: 100%;
  }
  .img-box {
    width: 100%;
    height: 100%;
    border-radius: 32rpx;
  }
}
.icon-nav-list {
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 20rpx 24rpx 24rpx;

  .item {
    width: 20%;
    cursor: pointer;
    text-align: center;
    &-img {
      display: block;
      margin: 0 auto 18rpx;
      width: 88rpx;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      border-radius: 50%;
      .iconfont {
        font-size: 64rpx;
        color: #fff;
      }
    }

    &-text {
      font-size: 28rpx;
      line-height: 33rpx;
    }
    &:nth-child(1) {
      .item-img {
        background: linear-gradient(180deg, #ffcb7d 0%, #fa5b3e 100%);
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(247, 116, 79, 0.25);
      }
    }
    &:nth-child(2) {
      .item-img {
        background: linear-gradient(180deg, #93e985 0%, #54bf6b 100%);
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(74, 206, 71, 0.25);
      }
    }

    &:nth-child(3) {
      .item-img {
        background: linear-gradient(180deg, #f8d971 0%, #f3ad3e 100%);
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(242, 158, 76, 0.25);
      }
    }

    &:nth-child(4) {
      .item-img {
        background: linear-gradient(180deg, #b38dff 0%, #7f43f8 100%);
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(86, 143, 245, 0.25);
      }
    }

    &:nth-child(5) {
      .item-img {
        background: linear-gradient(180deg, #67b4fc 0%, #3d74fc 100%);
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(86, 143, 245, 0.25);
      }
    }
  }
}

.top-shop {
  padding: 24rpx;
  background: #fff;

  .shop-title {
    margin-bottom: 24rpx;
    width: 148rpx;
    height: 52rpx;
    .shop-title-img {
      width: 100%;
      height: 100%;
    }
  }

  .shop-cont {
    display: flex;
    overflow-x: scroll;

    .shop-item {
      width: 128rpx;
      margin-right: 24rpx;
      flex-shrink: 0;
      .item-img {
        height: 128rpx;
        width: 128rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
        }
      }

      .item-text {
        text-align: center;
        font-size: 24rpx;
        margin-top: 16rpx;
        line-height: 40rpx;
        @include text-ellipsis(1);
      }
    }
  }
}

.top-good {
  .good-screen {
    padding: 0 24rpx 18rpx;
    width: calc(100% - 29rpx);
    background: #fff;
    margin: 0 -16rpx 24rpx;
    display: flex;
    overflow-x: auto;
    .screen-item {
      flex-shrink: 0;
      font-weight: 400;
      color: #6c7385;
      line-height: 48rpx;
      height: 54rpx;
      font-size: 28rpx;
      padding: 0 16rpx;
      &.active {
        background: url('~@/static/images/icon/icon-1.png') no-repeat center bottom;
        background-size: 24rpx 8rpx;
      }
    }
  }

  .good-cont {
    padding: 0 24rpx;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -9rpx;
    .good-item {
      width: calc(50% - 18rpx);
      margin: 0 9rpx 24rpx;

      :deep(.item-box) {
        padding: 16rpx 14rpx 10rpx;
      }
    }
  }
}
</style>
